<template>
  <view class="wrap">
    <view class="box goods-box">
      <view class="title">型号</view>
      <view class="goods">
        <view class="item card-bg mb-32">
          <!--商品-->
          <view class="goods">
            <image class="l" mode="aspectFill" :src="sku.suk_image"></image>
            <view class="c line1">
              {{sku.suk_name}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box image-box">
      <view class="title">上传实拍图</view>
      <view class="pictrue-box">
        <view
            class="pictrue"
            v-for="(item, index) in imgList || []"
            :key="index + 'img'"
        >
          <image v-if="item.url" :src="item.url" class="live-img" mode="aspectFill"></image>

          <view v-else @click="modalPicTap(index)" class="default-box">
            <image :src="item.default"  mode="aspectFill"></image>
            <view class="mt-16 text--w111-999 fs-24">{{item.text}}</view>
          </view>

          <!-- 删除按钮 -->
          <text v-if="item.url" class="btndel ebao-iconfont ebao-ic_close text-red" @click="handleRemove(index)"></text>
        </view>
      </view>
<!--      <view class="pictrue-box">-->
<!--        <view-->
<!--            class="pictrue"-->
<!--            v-for="(item, index) in imgList || []"-->
<!--            :key="index + 'img'"-->
<!--        >-->
<!--          <image :src="item" mode="aspectFill"></image>-->
<!--          &lt;!&ndash; 删除按钮 &ndash;&gt;-->
<!--          <text class="btndel ebao-iconfont ebao-ic_close text-red" @click="handleRemove(index)"></text>-->
<!--        </view>-->
<!--        &lt;!&ndash; 添加图片 &ndash;&gt;-->
<!--        <view-->
<!--            class="upLoad acea-row row-center-wrapper"-->
<!--            @click="modalPicTap('duo')"-->
<!--        >-->
<!--          <text>+</text>-->
<!--        </view>-->
<!--      </view>-->
    </view>
    <view class="box sku-box">
      <view class="title">填写信息</view>
      <view class="sku">
        <view class="item acea-row row-middle">
          <view class="name">销售价</view>
          <input type="number" v-model="cost" placeholder="请填写销售价" placeholder-class="placeholder"/>
        </view>
        <view class="item acea-row row-middle">
          <view class="name">成色</view>
          <view class="new-box">
            <view class="new-item" @click="level=item.id" :class="{'btn-blue':item.id==level}" v-for="(item,index) in levelList" :key="index">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view @click="save" class="btn-save btn-default btn-blue">添加商品</view>
  </view>
</template>

<script>
import {addStoreProduct, addStoreProductImg, applyAddGoods, userInfo} from "@/api/admin";
import {getProductDetail} from "@/api/store";

export default {
  data() {
    return {
      storeId:'',
      ids:'',
      sku:'',
      cost:'',
      imgList:[
        {
          url:'',
          default:'https://qn.ebaozu.cn/public/mini/static/live-1.png',
          text:'正面图'
        },
        {
          url:'',
          default:'https://qn.ebaozu.cn/public/mini/static/live-2.png',
          text:'背面图'
        },
        {
          url:'',
          default:'https://qn.ebaozu.cn/public/mini/static/live-3.png',
          text:'侧面图'
        }
      ],

      level:'99new',
      levelList: [
        {
          name: "99新",
          id: "99new",
        },
        {
          name: "95新",
          id: "95new",
        },
        {
          name: "9成新",
          id: "90new",
        },
        {
          name: "8成新",
          id: "80new",
        },
        {
          name: "7成新",
          id: "70new",
        },
      ],
    }
  },
  onLoad(options) {
    if(options.sku){
      this.sku= JSON.parse(options.sku)
    }
    if(options.ids){
      this.ids=options.ids
    }
    this.getInfo()
  },
  onShow() {

  },
  methods: {
    getInfo(){
      userInfo().then(res=>{
        if(res.status===200){
          this.storeId=res.data.store_id
        }
      })
    },
    // 上传图片
    uploadpic: function(index) {
      let that = this;
      that.$util.uploadImageChange({count:1,url:'upload/image'}, (res) => {
        this.imgList[index].url=res.data.url
      });
    },
    // 打开选择图片弹窗
    modalPicTap(index) {
      this.uploadpic(index)
    },
    // 删除图片
    handleRemove(index) {
      this.imgList[index].url=''
    },
    addStoreProductImg(){
      addStoreProductImg({
        product_id:this.id,
        snapshot:this.imgList.join(',')
      }).then(res=>{
        if(res.status==200){
          uni.showToast({
            title:'上传成功',
            icon:'none'
          })
          uni.navigateBack()
        }
      })
    },
    save(){
      let snapshot=[]
      this.imgList.forEach(item=>{
        if(item.url){
          snapshot.push(item.url)
        }
      })

      let form={
        store_id:this.storeId,
        brand_com:this.ids,
        sku_name:this.sku.suk_name,
        cost:this.cost,
        snapshot:snapshot.join(','),
        level:this.level
      }

      if(!form.cost){
        uni.showToast({
          title:'请填写销售价',
          icon:'none'
        })
        return
      }
      applyAddGoods(form).then(res=>{
        if(res.status==200){
          uni.showModal({
            content: '添加成功，等待5-10分钟生效',
            showCancel:false,
            success: function (res) {
              uni.navigateBack()
            }
          });
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  padding: 30rpx;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
}
.box{
  margin-bottom: 50rpx;
  .title{
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 32rpx;
  }
}

.image-box{
  .pictrue-box{
    display: flex;
    flex-wrap: wrap;
    .pictrue {
      width: 200rpx;
      height: 200rpx;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      margin-right: 15px;
      margin-bottom: 10px;
      display: inline-block;
      position: relative;
      cursor: pointer;
      background: #fafafa;

      .live-img {
        width: 100%;
        height: 100%;
      }

      .default-box{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        image{
          width: 50%;
          height: 50%;
        }
      }


      .btndel {
        position: absolute;
        z-index: 1;
        right: 0;
        top: -4px;
      }
    }
    .upLoad {
      width: 200rpx;
      height: 200rpx;
      line-height: 58px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.02);
      cursor: pointer;
      text-align: center;
      font-size: 24px;
      color: #999;
    }
  }
}

.goods-box{
  .goods{
    .item{
      border-radius: 20rpx;
      overflow: hidden;
      padding: 20rpx;
      background: #fff;
      .goods{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l{
          flex: 0 0 120rpx;
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;
        }
        .c{
          height: 120rpx;
          flex: 1;
        }
      }
    }
  }
}

.sku-box{
  .sku{
    background-color: #fff;
    border-radius: 24rpx;
    padding: 0 24rpx;
    margin-bottom: 20rpx;
    .item{
      min-height: 102rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      &~.item{
        border-top: 1px solid #F1F1F1;
      }
      .itemn{
        margin-left: 50rpx;
        color: #999999;
        .iconfont {
          margin-top: 4rpx;
          color: #CCCCCC;
          margin-right: 14rpx;
        }
        &.on {
          color: #333333;
          .iconfont {
            color: #2A7EFB;
          }
        }
      }
      .name{
        color: #333333;
        width: 115rpx;
        margin-right: 39rpx;
      }
      .info{
        color: #999999;
        flex: 1;
      }
      .stock{
        font-size: 36rpx;
        font-family: 'Regular';
        color: #999;
      }
      input {
        font-size: 36rpx;
        font-family: 'Regular';
        color: #333333;
      }
      // #ifdef MP
      input {
        font-size: 30rpx;
      }
      // #endif
      .placeholder{
        font-size:28rpx;
      }
      .pictrue{
        width: 100rpx;
        height: 100rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }
    }

    .new-box{
      display: flex;
      flex-wrap:wrap;
      .new-item{
        border: 1rpx solid #ddd;
        border-radius: 6rpx;
        padding: 4rpx 0;
        width: 76rpx;
        text-align: center;
        font-size: 22rpx;
        margin-right: 20rpx;
      }
      .new-item-on{
        background: #00aaea;
      }
    }
  }
}

.btn-save{
  width: 100%;
  height: 90rpx;
  border-radius: 60rpx;
  font-size: 30rpx;
}
</style>